<template>
	<view class="health">
		<view
			class="header-fixed"
			:style="{ paddingTop: globalData.paddingTop + 'px',height:globalData.navBarHeight+ 'px' }"
		>
			<view class="l_content" :style="{ height: globalData.lineHeight + 'px'}"> Hello，欢迎回来！ </view>
		</view>
		<view
			class="t_container"
			:style="{ paddingTop: globalData.navBarHeight + 'px' }"
		>
			<view class="l_content">
				<view class="header-c">
					<view class="t-box">
						<view class="item">
							<view class="num">{{
								recommendObj.alreadyEnergyContent | cardVal
							}}</view>
							<view class="item-text">饮食(千卡)</view>
						</view>
						<view
							class="item circularProgress"
							v-if="recommendObj.progressColor"
						>
							<circularProgress
								bgColor="#3D4661"
								:isBgShow="true"
								type="circular60"
								:lineWidth="10"
								boxWidth="140"
								boxHeight="140"
								:progressColor="recommendObj.progressColor"
								:fontShow="false"
								:percent="recommendObj.circularProgress"
							>
								<view class="details">
									<view class="item-text">{{
										recommendObj.circularProgressText
									}}</view>
									<view class="num">{{
										recommendObj.circularProgressNum
											| cardVal
									}}</view>
									<view class="item-text"
										>推荐摄入{{
											recommendObj.energyContent | cardVal
										}}</view
									>
								</view>
							</circularProgress>
						</view>
						<view class="item">
							<view class="num">{{ sportExpend | cardVal }}</view>
							<view class="item-text">运动(千卡)</view>
						</view>
					</view>
					<view class="b-box">
						<view class="item">
							<view class="item-text">碳水</view>
							<view class="progress">
								<u-line-progress
									:percentage="
										(recommendObj.alreadyChoContent /
											recommendObj.choContent) *
										100
									"
									:showText="false"
									inactiveColor="#3D4661"
									:activeColor="
										progressFn2(
											recommendObj.alreadyChoContent,
											recommendObj.choContent
										).progressColor
									"
									height="7"
								></u-line-progress>
							</view>
							<view class="num">
								<text
									:style="{
										color: progressFn2(
											recommendObj.alreadyChoContent,
											recommendObj.choContent
										).progressColor
									}"
								>
									{{
										recommendObj.alreadyChoContent | cardVal
									}}
								</text>
								/{{ recommendObj.choContent | cardVal }}克</view
							>
						</view>
						<view class="item">
							<view class="item-text">脂肪</view>
							<view class="progress">
								<u-line-progress
									:percentage="
										(recommendObj.alreadyFatContent /
											recommendObj.fatContent) *
										100
									"
									:showText="false"
									inactiveColor="#3D4661"
									:activeColor="
										progressFn2(
											recommendObj.alreadyFatContent,
											recommendObj.fatContent
										).progressColor
									"
									height="7"
								></u-line-progress>
							</view>
							<view class="num">
								<text
									:style="{
										color: progressFn2(
											recommendObj.alreadyFatContent,
											recommendObj.fatContent
										).progressColor
									}"
								>
									{{
										recommendObj.alreadyFatContent | cardVal
									}}
								</text>
								/{{ recommendObj.fatContent | cardVal }}克</view
							>
						</view>
						<view class="item">
							<view class="item-text">氨基酸</view>
							<view class="progress">
								<u-line-progress
									:percentage="
										(recommendObj.alreadyProteinContent /
											recommendObj.proteinContent) *
										100
									"
									:showText="false"
									inactiveColor="#3D4661"
									:activeColor="
										progressFn2(
											recommendObj.alreadyProteinContent,
											recommendObj.proteinContent
										).progressColor
									"
									height="7"
								></u-line-progress>
							</view>
							<view class="num">
								<text
									:style="{
										color: progressFn2(
											recommendObj.alreadyProteinContent,
											recommendObj.proteinContent
										).progressColor
									}"
								>
									{{
										recommendObj.alreadyProteinContent
											| cardVal
									}}
								</text>
								/{{ recommendObj.proteinContent | cardVal }}克
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="header-bg"></view>
		<view class="m_container">
			<view style="padding: 0 28rpx" class="newStyle">
				<view class="device-card">
					<view class="item">
						<view class="num">{{
							userInfo.maxExhale < 0
								? 0
								: userInfo.maxExhale | cardVal
						}}</view>
						<view class="text">肺活量</view>
					</view>
					<view class="item" v-if="ble.state == 0">
						<image
							class="img"
							src="http://oss.antaimedical.com/images/static/2024/08/66b47bc1e4b000d2c606b524bblrMJK2gq935a3581f5f3a72a294dcfd449f2b1e19c.png"
						/>
					</view>
					<view class="item" v-else>
						<view
							class="num"
							@click="navigate('/pagesA/device/index')"
						>
							<u-icon
								size="25"
								name="http://oss.antaimedical.com/images/pro/2025/03/67c91545e4b0be9d4442345cHraBkd9DyCLP8597555e00251b22529e22d96bdd6c9e.png"
							></u-icon>
						</view>
						<view class="text">添加设备</view>
					</view>
					<view class="item">
						<view class="num">{{ rerLevel | cardVal }}</view>
						<view class="text">代谢等级</view>
					</view>
				</view>
				<view class="recommended-btn">
					<view class="btn-box">
						<view
							class="btn-item"
							@click="
								navigate(
									'/pagesA/health/diet/weekRecommended?weekType=0'
								)
							"
						>
							<view class="btn-item-l">
								<image
									class="icon"
									src="http://oss.antaimedical.com/images/pro/2025/02/67ada465e4b0d615350f3135nHMqRbvXZFZ134adb872ce480b228ba10dc2bc38b1a3.png"
									mode="scaleToFill"
								/>
								今日膳食推荐
							</view>
							<text
								class="iconfont icon-arrow_rigth"
								style="color: #000"
							></text>
						</view>
						<view class="btn-item" @click="handleToWeekRecommended">
							<view class="btn-item-l">
								<image
									class="icon"
									src="http://oss.antaimedical.com/images/pro/2025/02/67ada479e4b0d615350f3136C6JL4qKJGegO26561621c8e8850eaf8765c5b2d3c2a2.png"
									mode="scaleToFill"
								/>
								下周摄入推荐
							</view>
							<text
								class="iconfont icon-arrow_rigth"
								style="color: #000"
							></text>
						</view>
					</view>
				</view>
				<view style="margin: 20rpx 0">
					<u-image
						mode="widthFix"
						width="100%"
						height="168rpx"
						:showMenuByLongpress="false"
						@click="handleTo28Day"
						src="http://oss.antaimedical.com/images/pro/2025/02/67aea58be4b0d615350f313adJaN090QFTvea54e430b859293193706637aa05777b5.png"
						:lazy-load="true"
					></u-image>
				</view>
				<view class="new-record-card" style="margin-top: 20rpx">
					<view class="title"> 行为记录 </view>
					<view class="text">
						使代谢弹性分数计算和营养推荐更精准
					</view>
					<view class="record-box">
						<view
							class="record-item"
							@click="navigate('/pagesA/health/diet/index')"
						>
							<u-icon
								size="14"
								name="http://oss.antaimedical.com/images/pro/2025/02/67adaf3ee4b0be9d44423443dhpxOUC8O1jV39865ac7af552e6814f5c53ae133a778.png"
							></u-icon>
							<view class="b-box">
								<text>饮食记录</text>
								<u-icon
									name="http://oss.antaimedical.com/images/pro/2025/02/67adaee5e4b0d615350f3137uaHRp1ywEdWn9b42da69bb2b57a1f71b7877b51d6602.png"
								></u-icon>
							</view>
						</view>
						<view class="record-item" @click="goAdd()">
							<u-icon
								size="14"
								name="http://oss.antaimedical.com/images/pro/2025/02/67adaf4fe4b0d615350f3138uyVtI5CTj7YS6b2707d1fa94f161f7a6015c5054cb2e.png"
							></u-icon>
							<view class="b-box">
								<text>运动记录</text>
								<u-icon
									name="http://oss.antaimedical.com/images/pro/2025/02/67adaee5e4b0d615350f3137uaHRp1ywEdWn9b42da69bb2b57a1f71b7877b51d6602.png"
								></u-icon>
							</view>
						</view>
						<view
							class="record-item"
							@click="navigate('/pagesA/health/sleep/sleepIndex')"
						>
							<u-icon
								size="14"
								name="http://oss.antaimedical.com/images/pro/2025/02/67adaf59e4b0be9d444234449SlLgnXak7A33055d8a32fffd1af0c92834f7d0c28be.png"
							></u-icon>
							<view class="b-box">
								<text>睡眠记录</text>
								<u-icon
									name="http://oss.antaimedical.com/images/pro/2025/02/67adaee5e4b0d615350f3137uaHRp1ywEdWn9b42da69bb2b57a1f71b7877b51d6602.png"
								></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view style="margin: 20rpx 0">
					<u-image
						mode="widthFix"
						width="100%"
						height="230rpx"
						:showMenuByLongpress="false"
						@click="navigateTo('/pagesB/knowledge/elasticity2')"
						src="http://oss.antaimedical.com/images/pro/2025/02/67adaff5e4b0d615350f3139G7v1j6zo3JhDe369aba0467f3c014ed1894df5386f1f.png"
						:lazy-load="true"
					></u-image>
				</view>
				<view class="record-card">
					<view class="c_tips">
						<view class="l-txt">
							<view class="txt">
								<text>测量记录</text>
							</view>
							<view class="icon-box" v-if="showClickDetails">
								<image
									class="icon"
									src="http://oss.antaimedical.com/images/pro/2024/10/670a1ba2e4b0d615350f3090jBcUG7rZDZ935f7447dc6bbc70a152b443000f5de539.png"
									mode="scaleToFill"
								/>
								{{ recordInfo.type }}
							</view>
						</view>
						<view class="r-txt" @click="goAnalyse">
							更多
							<text
								class="iconfont icon-arrow_rigth"
								style="color: #999999"
							></text>
						</view>
					</view>
					<view class="total" style="font-size: 20rpx">
						碳水消耗比例
					</view>
					<view class="r_charts">
						<myCharts
							:option="todayMetabolismOption"
							@chartClick="chartClick"
						></myCharts>
					</view>
				</view>
				<view class="m-card" style="margin: 20rpx 0">
					<view class="c_tips">
						<view class="txt">
							<text>弹性代谢指数</text>
							<view class="u_time" v-if="scoreInfo.pageType == 2">
								更新日期：{{ scoreInfo.createTime }}
							</view>
						</view>
					</view>
					<view class="none" v-if="scoreInfo.pageType == 0">
						<view
							class="unlock-btn"
							@click="
								navigate('/pagesA/health/device/info/index')
							"
							><u-icon
								name="http://oss.antaimedical.com/images/pro/2025/02/67aea9b9e4b0be9d44423445RO21ZWKe6zBh955e3551737a38bf84b17124a4e484e6.png"
								size="15"
							></u-icon>
							立即测试</view
						>
						<view class="unlock-text"> 解锁您的弹性分数 </view>
						<view class="unlock-text2">
							在本周内完成
							<text class="unlock-text3">
								3 <text style="font-size: 26rpx">天</text>
							</text>
							日目标即可生成第一个弹性分数，加油！
						</view>
					</view>
					<view class="unlock" v-else-if="scoreInfo.pageType == 1">
						<view
							class="unlock-btn"
							@click="
								navigate('/pagesA/health/device/info/index')
							"
							><u-icon
								name="http://oss.antaimedical.com/images/pro/2025/02/67aea9b9e4b0be9d44423445RO21ZWKe6zBh955e3551737a38bf84b17124a4e484e6.png"
								size="15"
							></u-icon>
							立即测试</view
						>
						<view class="unlock-text"> 弹性分数未生成 </view>
						<view class="unlock-text2">
							在本周内完成
							<text class="unlock-text3">
								{{ scoreInfo.day }}
								<text style="font-size: 26rpx">天</text>
							</text>
							日目标即可生成第一个弹性分数，加油！
						</view>
						<view class="day">
							<view class="d_t"> 日目标 </view>
							<view class="tips">
								根据个人生活习惯完成清晨、早餐后、午餐后、晚餐后的测量。
							</view>

							<view class="options">
								<view
									class="option"
									v-for="(item, index) in goalStatus"
									:key="index"
								>
									<view
										class="o_status"
										:class="{ checked: item.status }"
									>
										<u-icon
											v-if="item.status"
											name="checkmark"
											color="#fff"
											size="28"
										></u-icon>
										<text v-else>-</text>
									</view>
									<view class="type">
										{{ item.name }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view
						class="task"
						v-else-if="scoreInfo.pageType == 2"
						@click="navigate('/pagesA/health/grade/details')"
					>
						<view class="garage">
							<circularProgress
								bgColor="#eeeffc"
								:isBgShow="true"
								:lineWidth="14"
								boxWidth="160"
								boxHeight="160"
								progressColor="#D6DAFF"
								fontColor="#5677fc"
								gradualColor="#1F2434"
								:fontShow="false"
								:percent="(scoreInfo.mbScore / 15) * 100"
							>
								<view class="details">
									<view>
										{{ scoreInfo.mbScore.toFixed(2) }}
									</view>
									<view class="text1">弹性分数</view>
								</view>
							</circularProgress>
						</view>
						<view class="m_t">
							持续跟踪弹性分数，有助于了解您的健康弹性，加油！
						</view>
						<view class="weeks">
							<view class="d_t"> 本周概况 </view>
							<view class="status">
								<view
									class="s_i"
									v-for="item in taskStatus"
									:key="item.type"
								>
									<view
										class="s_dot"
										:style="{ backgroundColor: item.color }"
									></view>
									<view class="s_text">{{ item.text }}</view>
								</view>
							</view>
							<view class="w_box">
								<view
									class="week"
									v-for="item in weeks"
									:key="item.type"
								>
									<view
										class="w_dot"
										:style="{
											backgroundColor: item.color
												? item.color
												: '#fafafa',
											border: item.color
												? '0'
												: '2rpx solid #666666'
										}"
									>
									</view>
									<view class="w_text">
										{{ item.text }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="margin: 20rpx 0">
					<u-image
						width="100%"
						height="168rpx"
						:showMenuByLongpress="false"
						@click="navigateTo('/pagesB/knowledge/elasticity')"
						src="http://oss.antaimedical.com/images/pro/2025/02/67aee905e4b0d615350f313bFWvZS5NFQhLP11e9420ec2b9534fe13d4b04d6fc4394.png"
						:lazy-load="true"
					></u-image>
				</view>
				<view class="w-card">
					<view class="title">
						<text class="t-l">您的体重</text>
						<view class="add" @click="showModal = true">
							<u-icon
								name="http://oss.antaimedical.com/images/pro/2025/02/67aeee90e4b0be9d44423446Qmhwf6QL5jiud5ae02e7ef813049429a42cbb0979df7.png"
								size="15"
							></u-icon>
						</view>
					</view>
					<view class="date-box">
						<view class="pre-p" @click="reduceTap">
							<u-icon
								name="http://oss.antaimedical.com/images/pro/2025/02/67b53d20e4b0d615350f313dEKrtfsElllvJ87b7d6428720bc342605b9c886760068.png"
								size="23"
							></u-icon>
						</view>
						<view class="date-m" @click="showCalendar = true">
							<text>{{ currentSearchTime }}</text>
						</view>
						<view class="next-p" @click="plusTap">
							<u-icon
								name="http://oss.antaimedical.com/images/pro/2025/02/67b53d0fe4b0be9d44423447QSYIrP0e4a6H34c2497b89a3ddf79dbd7258097e400e.png"
								size="23"
							></u-icon>
						</view>
					</view>
					<view class="tabs">
						<view
							@click="changeWeightTab(index, item.type)"
							class="tab"
							:class="{ current: currentWIndex == index }"
							v-for="(item, index) in tabs"
							:key="index"
						>
							{{ item.text }}
						</view>
					</view>
					<view class="charts_w">
						<myCharts
							:option="WeightOption"
							@chartClick="handleClickWeightChart"
						></myCharts>
					</view>
					<view v-if="showInfo" style="margin-top: 48rpx">
						<view class="showModal-page">
							<view class="s_l">
								<view class="time">
									{{ detailTime }}
								</view>
								<view class="showModal-line"></view>
								<view class="info_data">
									<text style="color: #545dde">{{
										detailData
									}}</text>
									<text>公斤</text>
								</view>
							</view>
							<view class="h_b" @click="showDelete = true">
								删除
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 引导页 -->
		<u-overlay :show="overlayShow" :opacity="0">
			<view class="guide-box">
				<image
					@click="handleClickImg()"
					class="img"
					:src="guideImgList[guideImgIndex]"
					mode="scaleToFill"
				/>
			</view>
		</u-overlay>
		<u-popup
			:show="questionPopup"
			@close="questionPopup = false"
			:round="30"
			closeable
		>
			<view class="popup-content">
				<view class="title">膳食方案</view>
				<view class="con-box">
					<view class="item">
						<view class="text"
							>1.本版块所有结果根据您近期代谢水平测量结果、运动记录、身体基础信息综合计算得出。</view
						>
					</view>
					<view class="item">
						<view class="text">
							2.本版块可以在本周周末，查看下周的营养推荐内容。但是系统会在当天您完成“清晨测量”的临时事件标签对应的代谢水平测量之后，对您今日的营养推荐不同食物的摄入量做调整。</view
						>
					</view>
					<view class="item">
						<view class="text"
							>3.为了更精准地给您推荐食材，请您每周都更新体重信息</view
						>
					</view>
				</view>
				<view class="btn" @click="questionPopup = false">确定</view>
			</view>
		</u-popup>
		<u-modal
			:show="showDelete"
			@close="showDelete = false"
			@cancel="showDelete = false"
			@confirm="$u.throttle(deleteRecord, 2500)"
			title="删除记录"
			confirmText="确认"
			cancelText="取消"
			showCancelButton
			cancelColor="#000000"
			confirmColor="#1F2434"
		>
			<view class="del_tips"> 确认删除该记录? </view>
		</u-modal>
		<custom-modal
			:showModal="showModal"
			@close="showModal = false"
			type="weight"
			@sendWeight="setWeight"
			:weight="userInfo.weight"
		></custom-modal>
		<my-calendar
			:monthNum="24"
			:defaultDate="defaultDate"
			:maxDate="maxDate"
			@confirm="selectDate"
			:minDate="minDate"
			:show="showCalendar"
			color="#545DDE"
			closeOnClickOverlay
			@close="showCalendar = false"
		></my-calendar>
		<drag-button :isDock="true" :existTabBar="true" />
		<tab-bar :current="0"></tab-bar>
	</view>
</template>

<script>
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import dragButton from '@/components/drag-button/drag-button.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts.min.js'
import myCharts from '@/components/charts/myCharts.vue'
import myCalendar from '@/components/myCalendar/myCalendar.vue'
import customModal from '@/components/custom-modal/index.vue'
import circularProgress from '@/components/circularProgress/circularProgress.vue'
import {
	findCh0RateRecord,
	getDetailsByUser,
	getWeightRecord,
	delWeightLog,
	addWeightLog,
	findMetabolicFlexScore,
	updateUserGuide,
	findDietaryRecommend,
	findNewestRerLevel,
	findSportExpend,
	getIsOpenActivity
} from '@/api/index.js'
import { getItemColor, getWeekDate } from '@/utils/utils.js'
import { mapState, mapGetters } from 'vuex'
const dayjs = require('@/utils/dayjs.min.js')
let app = getApp()
export default {
	components: {
		uniEcCanvas,
		customModal,
		myCharts,
		dragButton,
		myCalendar,
		circularProgress
	},
	data() {
		return {
			imgUrl: this.$imgUrl,
			globalData: app.globalData,
			userId: uni.getStorageSync('userId'),
			overlayShow: false,
			guideImgIndex: 0,
			status: [
				'http://oss.antaimedical.com/images/static/2024/06/666d344deb14d0f049f44d19nLCYRs6gqIu4d1573ef1c4be017d029a0d1cb62ac5da.png',
				'http://oss.antaimedical.com/images/static/2024/06/666d345eeb14d0f049f44d1aI9xNeH4ts7a783b3687c40253ad9f251a61424486bd1.png',
				'http://oss.antaimedical.com/images/static/2024/06/666d346beb14d0f049f44d1bdZgMKnmb0iTS27b54b8d865ea7c86aae9f3165321820.png'
			],
			guideImgList: [
				'http://oss.antaimedical.com/images/pro/2025/03/67ce9d24e4b0d615350f315b1COnC6TFh9eZcc4b27fac3b1a3e3dd6cbf11c471a090.png',
				'http://oss.antaimedical.com/images/pro/2025/03/67ce9d17e4b0be9d44423462NkMlapWBJsNl22a1f69799eebd3c3056d8086fcbed3f.png',
				'http://oss.antaimedical.com/images/pro/2025/03/67ce9d0ae4b0be9d44423461uMD0NYKvpdqP309585519138f5f9d3ad8f445a459a72.png',
				'http://oss.antaimedical.com/images/pro/2025/03/67ce9cfbe4b0be9d44423460WWLeu02DtXiF0668993ae5b43a9e250366d847f08a07.png',
				'http://oss.antaimedical.com/images/pro/2025/03/67ce9cede4b0d615350f315a8n36iJEw5NVM7a363cf65e97c53078a44d86469fa14a.png',
				'http://oss.antaimedical.com/images/pro/2025/03/67ce9cdfe4b0d615350f3159uJYSrITKSTyH17d0fd1dd85681688857809383d980d3.png',
				'http://oss.antaimedical.com/images/pro/2025/03/67ce9cd2e4b0d615350f3158fUrH5LDpui5O3b961d51b944d17795feec029f34a557.png',
				'http://oss.antaimedical.com/images/pro/2025/03/67ce9c88e4b0be9d4442345fc2eyxl7K32uF81b7779390f27f5dad423864c04f792c.png'
			],
			taskStatus: [
				{
					text: '当天',
					color: '#545DDE'
				},
				{
					text: '已达成',
					color: '#7CD37E'
				},
				{
					text: '未达成',
					color: '#CCCCCC'
				}
			],
			weeks: [
				{
					type: -1,
					text: '一',
					color: ''
				},
				{
					type: -1,
					text: '二',
					color: ''
				},
				{
					type: -1,
					text: '三',
					color: ''
				},
				{
					type: -1,
					text: '四',
					color: ''
				},
				{
					type: -1,
					text: '五',
					color: ''
				},
				{
					type: -1,
					text: '六',
					color: ''
				},
				{
					type: -1,
					text: '日',
					color: ''
				}
			],
			tabs: [
				{
					type: 1,
					text: '日'
				},
				{
					type: 2,
					text: '周'
				},
				{
					type: 3,
					text: '月'
				}
			],

			currentWIndex: 1,
			currentType: 2,
			showModal: false, // 体重弹窗
			showInfo: false, // 体重点击详情
			showDelete: false, // 体重删除弹框
			detailTime: '',
			detailData: '',
			chartsRecordList: [], // 测量记录图表数据
			currentRecordIndex: 0,
			showClickDetails: false,
			recordInfo: {
				type: ''
			},
			questionPopup: false, // 营养推荐问号弹窗
			scoreInfo: { pageType: 0 }, // 代谢弹性分数详情数据
			goalStatus: [],
			todayMetabolismOption: {},
			recommendObj: {
				circularProgressText: '',
				circularProgressNum: '',
				energyContent: '',
				choContent: '',
				fatContent: '',
				proteinContent: '',
				energyContent: ''
			},
			rerLevel: '',
			sportExpend: '',
			WeightOption: {},
			defaultDate: [],
			maxDate: '',
			minDate: '',
			currentSearchTime: '',
			showCalendar: false
		}
	},
	computed: {
		...mapState({
			ble: (state) => state.ble // 实时蓝牙全局状态
		}),
		...mapGetters({
			userInfo: 'getUserInfo'
		})
	},
	filters: {
		cardVal(val) {
			return val ? val : '0'
		}
	},
	watch: {
		'userInfo.userId': {
			handler(newVal, oldVal) {
				this.userId = newVal
				this.fetchData()
			}
		}
	},
	onPullDownRefresh() {
		this.fetchData()
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 1200)
	},
	onReady() {},
	onLoad() {
		this.maxDate = dayjs().format('YYYY-MM-DD')
		this.minDate = dayjs(dayjs(this.maxDate).subtract(365, 'day')).format(
			'YYYY-MM-DD'
		)
		this.currentSearchTime = getWeekDate(dayjs().format('YYYY/MM/DD'))
		this.defaultDate[0] = this.maxDate
		if (this.userInfo.guide == 0) this.overlayShow = true
	},
	onShow() {
		if (this.userInfo.userId) {
			this.fetchData()
		} else {
			this.todayMetabolismOption = {
				showChart: true
			}
			this.recommendObj.circularProgressText = '未检测'
			this.recommendObj.progressColor = '#23C89E'
		}
	},
	methods: {
		handleTo28Day() {
			if (this.isLogin()) return
			getIsOpenActivity({ userId: this.userInfo.userId }).then((res) => {
				if (res.data == 1) {
					uni.navigateTo({
						url: '/pagesB/clockInDay/index'
					})
				} else {
					uni.navigateTo({
						url: '/pagesB/clockInDay/notActivity'
					})
				}
			})
		},
		// 引导页图片点击
		handleClickImg() {
			this.guideImgIndex++
			if (this.guideImgIndex >= 8) {
				this.overlayShow = false
				updateUserGuide({ bodyId: this.userInfo.bodyId }).then(
					(res) => {
						this.getInfoByUser()
					}
				)
			}
		},
		// 跳转到下周推荐
		handleToWeekRecommended() {
			if (this.isLogin()) return
			let that = this
			let weekDay = dayjs('2024-10-19').day() // 获取今天周几
			if (weekDay == 0 || weekDay == 6) {
				uni.showModal({
					title: '提示',
					content:
						'由于本周尚未结束，所以如果您预览之后，本周代谢数据有较大变化，可能与下周一的推荐结果有差异。',
					confirmColor: '#1F2434',
					// showCancel: false,
					cancelText: '取消',
					confirmText: '确认',
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定')
							that.navigateTo(
								'/pagesA/health/diet/weekRecommended?weekType=1'
							)
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			} else {
				uni.showModal({
					title: '再等等呗',
					content:
						'由于下周的推荐方案需要结合你本周的数据，所以只有在周六周日此功能才生效',
					confirmColor: '#1F2434',
					// showCancel: false,
					cancelText: '取消',
					confirmText: '确认',
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定')
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			}
		},
		// 营养推荐统计
		async getFindDietaryRecommend() {
			let params = {
				time: dayjs().format('YYYY-MM-DD'),
				bodyId: this.userInfo.bodyId,
				userId: this.userInfo.userId
			}
			findNewestRerLevel(params).then((res) => {
				this.rerLevel = res.data || 0
			})
			findSportExpend(params).then((res) => {
				this.sportExpend = res.data || 0
			})
			this.recommendObj.progressColor = ''
			await findDietaryRecommend(params)
				.then((res) => {
					this.recommendObj = res.data
					this.recommendObj.energyContent =
						this.recommendObj.energyContent.toFixed()
					let num =
						(this.recommendObj.alreadyEnergyContent /
							this.recommendObj.energyContent) *
						100
					if (
						this.recommendObj.alreadyEnergyContent >=
						this.recommendObj.energyContent
					) {
						this.recommendObj.circularProgressText = '摄入超标'
						this.recommendObj.circularProgressNum = (
							this.recommendObj.alreadyEnergyContent -
							this.recommendObj.energyContent
						).toFixed()
						this.recommendObj.progressColor = '#F46666'
						this.recommendObj.circularProgressColor = '#F46666'
					} else if (
						this.recommendObj.alreadyEnergyContent <
						this.recommendObj.energyContent
					) {
						this.recommendObj.circularProgressNum = (
							this.recommendObj.energyContent -
							this.recommendObj.alreadyEnergyContent
						).toFixed()
						this.recommendObj.circularProgressText = '还可摄入'
						this.recommendObj.circularProgressColor = '#23C89E'
						this.recommendObj.progressColor = '#23C89E'
					} else {
						this.recommendObj.circularProgressText = '未检测'
						this.recommendObj.circularProgressColor = '#23C89E'
						this.recommendObj.progressColor = '#23C89E'
					}
					if (num < 1) {
						this.recommendObj.circularProgress = 0
					} else if (num > 100) {
						this.recommendObj.circularProgress = 100
					} else {
						this.recommendObj.circularProgress = num
					}
				})
				.catch((err) => {
					this.recommendObj.progressColor = '#23C89E'
				})
		},
		isLogin() {
			if (!this.userInfo.userId) {
				uni.showModal({
					title: '提示',
					content: '需要授权后才能使用。',
					confirmColor: '#1F2434',
					// showCancel: false,
					cancelText: '再看看',
					confirmText: '马上授权',
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定')
							uni.navigateTo({
								url: `/pagesB/login/index`
							})
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
				return true
			}
			return false
		},
		async fetchData() {
			uni.showLoading({
				title: '加载中...'
			})
			try {
				await this.getInfoByUser()
				await this.fetchRecordData()
				await this.fetchWeightData()
				await this.getFindDietaryRecommend()
			} catch (e) {
				//TODO handle the exception
			}
			uni.hideLoading()
		},
		// 获取首页数据
		async fetchRecordData() {
			this.showClickDetails = false
			let params = {
				userId: this.userId
			}
			findCh0RateRecord(params).then((res) => {
				this.chartsRecordList = res.data
				let option = {
					grid: {
						left: 0,
						right: 0,
						bottom: 0,
						top: '70',
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						// showContent: false,
						backgroundColor: '#1F2434',
						showDelay: 0,
						textStyle: {
							color: '#fff',
							fontSize: '14'
						},
						padding: [3, 10],
						formatter: `{b}\n{c}%`,
						position: ['50%', '0%']
					},
					xAxis: {
						type: 'category',
						axisLine: {
							//X轴刻度线样式
							show: true,
							lineStyle: {
								color: '#E6EBF5',
								width: 1
							}
						},

						axisTick: {
							show: false
						},
						axisLabel: {
							//X轴刻度线字体样式
							fontSize: 12,
							color: '#999999'
						},
						data: ['00:00']
					},
					yAxis: [
						{
							type: 'value',
							splitLine: {
								show: false,
								lineStyle: {
									width: 1,
									color: '#E6EBF5',
									type: 'dashed'
								}
							},
							axisLine: {
								//Y轴刻度线样式
								show: true,
								lineStyle: {
									color: '#E6EBF5',
									width: 1
								}
							},
							min: 0, // Y轴刻度
							max: 100, // Y轴刻度
							interval: 50, // Y轴刻度
							axisLabel: {
								//Y轴刻度线字体样式
								margin: 4,
								formatter: '{value}%',
								fontSize: 12,
								color: '#999999'
							},
							verticalAlign: 'middle'
						}
					],
					series: []
				}
				let seriesData = [
					{
						// name: '前',
						type: 'line',
						data: [],
						lineStyle: {
							color: '#23C89E',
							width: 2 // 线宽
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: 'rgba(190,239,227,0.8)'
									},
									{
										offset: 0.85,
										color: 'rgba(255,255,255,0)'
									}
								],
								global: false // 缺省为 false
							}
						},

						smooth: true
					}
				]
				let arrData = res.data.map((val, index) => {
					return {
						value: Math.round((val.ch0Rate || 0) * 100),
						rerData: {
							tag: val.tag,
							label: val.label
						},
						itemStyle: {
							color: '#23C89E',
							borderWidth: '0'
						}
					}
				})
				seriesData[0].data = arrData
				option.xAxis.data = res.data.map((val, index) => {
					return dayjs(val.createTime).format('HH:mm')
				})

				if (!res.data.length) {
					option.xAxis.data = ['00:00', '23:59']
					option['showChart'] = true
				} else {
					option['showChart'] = false
				}
				option.series = seriesData
				this.todayMetabolismOption = option
			})
		},
		chartClick(params) {
			if (params.data.rerData.tag == 4 || params.data.rerData.tag == 5) {
				this.recordInfo.type = this.getOtherTagLabel(
					params.data.rerData.label
				)
			} else {
				this.recordInfo.type = this.getTagLabel(params.data.rerData.tag)
			}
			this.showClickDetails = true
		},
		// 获取代谢分数数据
		async ferchMetabolicFlexScore() {
			let params = {
				userId: this.userId,
				bodyId: this.userInfo.id || this.userInfo.bodyId
			}
			try {
				const res = await findMetabolicFlexScore(params)
				if (res.code == 200) {
					this.scoreInfo = res.data
					this.goalStatus = [
						{
							name: '清晨',
							status: this.scoreInfo.tagLableOne
						},
						{
							name: '餐后',
							status: this.scoreInfo.afterMeal
						}
						// {
						//     name: '早餐后',
						//     status: this.scoreInfo.tagLablTwo
						// },
						// {
						//     name: '午餐后',
						//     status: this.scoreInfo.tagLableThree
						// },
						// {
						//     name: '晚餐后',
						//     status: this.scoreInfo.tagLableFore
						// }
					]

					this.weeks[0].type = res.data.week1
					this.weeks[1].type = res.data.week2
					this.weeks[2].type = res.data.week3
					this.weeks[3].type = res.data.week4
					this.weeks[4].type = res.data.week5
					this.weeks[5].type = res.data.week6
					this.weeks[6].type = res.data.week7
					this.weeks.forEach((item) => {
						item.color = this.getWeekColor(item.type)
					})
					if (this.scoreInfo.popFlag == 0) {
						uni.navigateTo({
							url: `/pagesA/health/grade/update?info=${JSON.stringify(
								this.scoreInfo
							)}`
						})
					}
				}
			} catch (e) {
				//TODO handle the exception
			}
		},
		// 获取用户详情信息
		async getInfoByUser() {
			let params = {
				userId: this.userId,
				urlencoded: true
			}
			try {
				const res = await getDetailsByUser(params)
				if (res.code == 200 && res.data) {
					this.$store.commit('setUserInfo', res.data)
					await this.ferchMetabolicFlexScore()
				}
			} catch (e) {
				//TODO handle the exception
			}
		},
		// 加载测量记录图表
		loadRecordCharts(data, indexArr) {
			this.$refs['record-charts'].init((canvas, width, height, dpr) => {
				const chart = echarts.init(canvas, null, {
					width,
					height,
					devicePixelRatio: dpr // new
				})
				chart.setOption(this.getOption(data, indexArr))
				chart.on('click', 'series', (params) => {
					console.log('cartsclick', params)
					this.currentRecordIndex = params.dataIndex
					this.recordInfo = {
						level: this.chartsRecordList[this.currentRecordIndex]
							.rerLevel,
						type: '',
						measureTime:
							this.chartsRecordList[this.currentRecordIndex]
								.measureTime
					}

					if (
						this.chartsRecordList[this.currentRecordIndex].tag ==
							4 ||
						this.chartsRecordList[this.currentRecordIndex].tag == 5
					) {
						this.recordInfo.type = this.getOtherTagLabel(
							this.chartsRecordList[this.currentRecordIndex].label
						)
					} else {
						this.recordInfo.type = this.getTagLabel(
							this.chartsRecordList[this.currentRecordIndex].tag
						)
					}
					this.showClickDetails = true
				})
				return chart
			})
		},
		// 删除体重记录
		async deleteRecord() {
			let time = this.detailTime.replace(/年|月/g, '-').replace(/日/g, '')
			try {
				let params = {
					time,
					userId: this.userId
				}
				const res = await delWeightLog(params)
				if (res.code == 200) {
					this.showInfo = false
					this.showDelete = false
					this.fetchWeightData()
					uni.showToast({
						title: '删除成功'
					})
				}
			} catch (e) {
				//TODO handle the exception
			}
		},
		// 添加体重记录
		async setWeight(val) {
			try {
				let params = {
					userId: this.userId,
					weight: val
				}
				const res = await addWeightLog(params)
				if (res.code == 200) {
					this.showModal = false
					this.showInfo = false
					this.fetchWeightData()
					uni.showToast({
						title: '添加成功'
					})
				}
			} catch (e) {
				//TODO handle the exception
			}
		},
		//  获体重记录数据
		async fetchWeightData() {
			let obj = {
				1: 'D',
				2: 'W',
				3: 'M'
			}
			this.showInfo = false
			let params = {
				userId: this.userId,
				type: obj[this.currentType],
				time: `${dayjs(this.defaultDate[0]).format(
					'YYYY-MM-DD'
				)} 23:59:59`
			}
			const res = await getWeightRecord(params)
			if (res.code == 200) {
				let option = {
					grid: {
						left: 0,
						right: 0,
						bottom: 0,
						top: '70',
						containLabel: true
					},
					dataZoom:
						this.currentType == 3
							? {
									id: '',
									type: 'inside',
									filterMode: 'none',
									orient: 'horizontal',
									start: 1,
									end: 50,
									maxValueSpan: 3600 * 24 * 1000 * 30,
									zoomLock: true
							  }
							: {
									id: '',
									type: 'inside',
									filterMode: 'none',
									orient: 'horizontal',
									maxValueSpan: 3600 * 24 * 1000 * 7,
									zoomLock: true
							  },
					tooltip: {
						trigger: 'axis',
						backgroundColor: '#1F2434',
						showDelay: 0,
						textStyle: {
							color: '#fff',
							fontSize: '14'
						},
						padding: [3, 10],
						formatter: `{b}\n{c}KG`,
						position: ['50%', '0%']
					},
					xAxis: {
						type: 'category',
						axisLine: {
							//X轴刻度线样式
							show: true,
							lineStyle: {
								color: '#E6EBF5',
								width: 1
							}
						},

						axisTick: {
							show: false
						},
						axisLabel: {
							//X轴刻度线字体样式
							fontSize: 12,
							color: '#999999'
						},
						data: []
					},
					yAxis: [
						{
							type: 'value',
							splitLine: {
								show: false,
								lineStyle: {
									width: 1,
									color: '#E6EBF5',
									type: 'dashed'
								}
							},
							axisLine: {
								//Y轴刻度线样式
								show: true,
								lineStyle: {
									color: '#E6EBF5',
									width: 1
								}
							},
							min: 0, // Y轴刻度
							max: 100, // Y轴刻度
							interval: 50, // Y轴刻度
							axisLabel: {
								//Y轴刻度线字体样式
								margin: 4,
								formatter: '{value}KG',
								fontSize: 12,
								color: '#999999'
							},
							verticalAlign: 'middle'
						}
					],
					series: []
				}
				let seriesData = [
					{
						// name: '前',
						type: 'line',
						data: [],
						lineStyle: {
							color: '#23C89E',
							width: 2 // 线宽
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#23C89E'
									},
									{
										offset: 1,
										color: 'rgba(255,255,255,0)'
									}
								],
								global: false // 缺省为 false
							}
						},

						smooth: true
					}
				]
				let arrData = res.data.map((val, index) => {
					return {
						value: val.weight | 0,
						paramsData: {
							time: val.time,
							createTime: val.createTime
						},
						itemStyle: {
							color: '#23C89E',
							borderWidth: '0'
						}
					}
				})
				seriesData[0].data = arrData
				option.xAxis.data = res.data.map((val, index) => {
					if (this.currentType == 1) {
						return (
							(val.createTime &&
								dayjs(val.createTime).format('HH:mm')) ||
							dayjs(val.time).format('MM/DD')
						)
					} else {
						return dayjs(val.time).format('MM/DD')
					}
				})
				if (!res.data.length) {
					if (this.currentType == 1) {
						option.xAxis.data = ['00:00', '23:59']
					} else {
						let dayArr = []
						for (let index = 0; index < 7; index++) {
							let day = dayjs(this.defaultDate[0])
								.subtract(7 - index, 'day')
								.format('MM/DD')
							dayArr.push(day)
						}
						option.xAxis.data = dayArr
					}
					option['showChart'] = true
				} else {
					option['showChart'] = false
				}
				option.series = seriesData
				let maxVal = option.series[0].data.find((val) => {
					return val.value > 100
				})
				if (maxVal) {
					option.yAxis[0].max = null
				}
				this.WeightOption = option
			}
		},
		handleClickWeightChart(params) {
			if (params.data.value) {
				this.detailTime = dayjs(
					params.data.paramsData.createTime
				).format('YYYY年MM月DD日')
				this.detailData = params.data.value
				this.showInfo = true
			}
		},
		// 选择日期
		selectDate(e) {
			console.log(e)
			this.defaultDate[0] = e[0]
			if (this.currentType == '1') {
				// 单个日期
				this.currentSearchTime = e[0].replaceAll('-', '/')
			} else if (this.currentType == '2') {
				this.currentSearchTime = getWeekDate(e[0])
			} else if (this.currentType == '3') {
				this.currentSearchTime = dayjs(e[0]).format('YYYY/MM')
			}
			this.fetchWeightData()
			this.showCalendar = false
		},
		// 上一个选项
		reduceTap() {
			let min = dayjs(this.minDate).format('YYYY/MM/DD')
			if (this.currentType == 1) {
				let pre = dayjs(
					dayjs(this.defaultDate[0]).subtract(1, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					// 比对前一天是否是最小天数的前一天
					this.currentSearchTime = pre
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchWeightData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 2) {
				let pre = dayjs(
					dayjs(this.defaultDate[0]).subtract(7, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					this.currentSearchTime = getWeekDate(pre)
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchWeightData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 3) {
				let pre = dayjs(
					dayjs(this.defaultDate[0]).subtract(1, 'month')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					this.currentSearchTime = dayjs(pre).format('YYYY/MM')
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchWeightData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			}
		},
		// 下一个选项
		plusTap() {
			let max = dayjs(this.maxDate).format('YYYY/MM/DD')
			if (this.currentType == 1) {
				let next = dayjs(
					dayjs(this.defaultDate[0]).add(1, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(next).isAfter(max)) {
					// 比对后一天是否是最大天数的后一天
					this.currentSearchTime = next
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchWeightData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 2) {
				let next = dayjs(
					dayjs(this.defaultDate[0]).add(7, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(next).isAfter(max)) {
					this.currentSearchTime = getWeekDate(next)
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchWeightData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 3) {
				let next = dayjs(
					dayjs(this.defaultDate[0]).add(1, 'month')
				).format('YYYY/MM')
				if (!dayjs(next).isAfter(max)) {
					this.currentSearchTime = dayjs(next).format('YYYY/MM')
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchWeightData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			}
		},
		changeWeightTab(index, type) {
			this.currentWIndex = index
			this.currentType = type
			if (type == '1') {
				this.currentSearchTime = dayjs(this.maxDate).format(
					'YYYY/MM/DD'
				)
			} else if (type == '2') {
				this.currentSearchTime = getWeekDate(this.maxDate)
				this.defaultDate[0] = this.maxDate
			} else if (type == '3') {
				this.currentSearchTime = dayjs().format('YYYY/MM')
				this.defaultDate[0] = this.maxDate
			}
			this.fetchWeightData()
		},
		navigate(url) {
			if (this.isLogin()) return
			uni.navigateTo({
				url
			})
		},
		navigateTo(url) {
			uni.navigateTo({
				url
			})
		},
		goAnalyse() {
			if (this.isLogin()) return
			uni.navigateTo({
				url: '/pagesA/health/analyse/index'
			})
		},
		goAdd() {
			if (this.isLogin()) return
			uni.navigateTo({
				url: `/pagesA/health/device/info/campaign/add?type=add&day=${dayjs().format(
					'YYYY-MM-DD'
				)}`
			})
		},
		getOption(data, indexArr) {
			return {
				grid: {
					left: 0,
					right: 0,
					bottom: 0,
					top: '5%',
					containLabel: true
				},
				dataZoom: {
					id: 'ecRecord',
					type: 'inside',
					filterMode: 'none',
					xAxisIndex: 0,
					startValue: 0,
					endValue: 11,
					zoomLock: true
				},
				xAxis: {
					type: 'category',
					axisLine: {
						show: false
					},
					axisLabel: {
						margin: 16,
						color: '#666D7F',
						fontWeight: 'normal',
						fontSize: 10,
						align: 'center'
					},
					axisTick: {
						show: false
					},
					data: indexArr
				},
				yAxis: {
					type: 'value',
					splitLine: {
						show: true,
						lineStyle: {
							width: 1,
							color: '#E6EBF5',
							type: 'dashed'
						}
					},
					min: 0,
					max: 5,
					interval: 1,
					axisLabel: {
						margin: 4,
						showMinLabel: false,
						color: (value, index) => {
							if (value == 1) {
								return '#7CD37E'
							} else if (value == 2) {
								return '#78B2DD'
							} else if (value == 3) {
								return '#9C70DE'
							} else if (value == 4) {
								return '#FFA168'
							} else if (value == 5) {
								return '#F1C56B'
							}
						}
					},
					verticalAlign: 'middle'
				},
				series: [
					{
						name: '历史记录',
						type: 'bar',
						barWidth: 8,
						itemStyle: {
							opacity: 0.8,
							borderRadius: [4, 4, 0, 0],
							color: (params) => {
								return getItemColor(params.value)
							}
						},
						data: data
					}
				]
			}
		},

		getTagLabel(type) {
			if (type == 1) {
				return '清晨测量'
			} else if (type == 2) {
				return '运动前'
			} else if (type == 3) {
				return '运动后'
			} else if (type == 6) {
				return '禁食后'
			} else if (type == 7) {
				return '睡前'
			} else if (type == 8) {
				return '自定义测量'
			} else if (type == 9) {
				return '第0天测量'
			} else if (type == 10) {
				return '呼气采集'
			} else if (type == 11) {
				return '吸气采集 '
			}
		},
		getOtherTagLabel(type) {
			if (type == 1) {
				return '早餐前'
			} else if (type == 2) {
				return '午餐前'
			} else if (type == 3) {
				return '晚餐前'
			} else if (type == 4) {
				return '早餐后'
			} else if (type == 5) {
				return '午餐后'
			} else if (type == 6) {
				return '晚餐后'
			} else if (type == 7) {
				return '零食前'
			} else if (type == 8) {
				return '零食后'
			}
		},

		getBgColor(data) {
			return getItemColor(data)
		},
		getWeekColor(type) {
			if (type === 0) {
				return '#CCCCCC'
			} else if (type === 1) {
				return '#7CD37E'
			} else if (type === 2) {
				return '#545DDE'
			} else {
				return ''
			}
		},
        progressFn2(type1, type2) {
			let num = type1
			let maxnum = type2
			let num1 = (num / maxnum) * 100
			let obj = {
				circularProgress: 0,
				progressColor: '#23C89E'
			}
			if (num1 < 1) {
				obj.circularProgress = 0
				obj.progressColor = '#23C89E'
			} else if (num1 > 100) {
				obj.circularProgress = 100
				obj.progressColor = '#F46666'
			} else {
				obj.circularProgress = num1
				obj.progressColor = '#23C89E'
			}
			return obj
		}
        
	}
}
</script>
<style lang="scss" scoped>
.health {
	background: #f3f4f7;
}
.header-fixed {
	width: 100%;
	background: #1f2434;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	.l_content {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 34rpx;
		color: #ffffff;
        display: flex;
        align-items: center;
        padding-left: 38rpx;
		text-align: left;
	}
}
.t_container {
	width: 100%;
	height: 606rpx;
	background-color: #1f2434;
	padding: 98rpx 26rpx 0 26rpx;
	.l_content {
		width: 100%;
		height: 62rpx;
		font-weight: 500;
		font-size: 48rpx;
		line-height: 62rpx;
		color: #ffffff;
		font-family: PingFangSC-Medium, PingFang SC;
		text-align: left;
		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 34rpx;
			color: #ffffff;
			text-align: left;
		}
		.header-c {
			margin-top: 70rpx;
			.t-box {
				min-height: 234rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.num {
					font-family: Roboto, Roboto;
					font-weight: 700;
					font-size: 38rpx;
					color: #ffffff;
					line-height: 48rpx;
					text-align: center;
					white-space: nowrap;
				}
				.item-text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #9ba2b9;
					line-height: 48rpx;
					text-align: center;
					white-space: nowrap;
				}
				.circularProgress {
					// width: 150rpx;
					margin-top: -46rpx;
					.details {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
			.b-box {
				margin-top: -30rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.item {
					width: 150rpx;
				}
				.num {
					font-weight: 400;
					font-size: 22rpx;
					color: #9ba2b9;
					line-height: 50rpx;
					text-align: left;
					white-space: nowrap;
				}
				.progress {
					padding: 8rpx 0;
				}
				.item-text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #ffffff;
					line-height: 48rpx;
					text-align: left;
				}
			}
		}
	}
}
.header-bg {
	width: 100%;
	height: 100rpx;
	border-radius: 0 0 50% 50%;
	background: #1f2434;
}

.m_container {
	width: 100%;
	padding-bottom: 64rpx;
	.device-card {
		width: 100%;
		height: 220rpx;
		background: #ffffff;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		margin-top: -120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.img {
				width: 60rpx;
				height: 160rpx;
			}
			.num {
				font-family: PingFang SC, PingFang SC;
				font-weight: 700;
				font-size: 38rpx;
				color: #000000;
				line-height: 48rpx;
				text-align: center;
				white-space: nowrap;
			}
			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #5a667e;
				line-height: 48rpx;
				text-align: center;
			}
		}
	}

	.recommended-btn .btn-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;

		.btn-item {
			width: 338rpx;
			height: 92rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #ffffff;
			border-radius: 15rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			text-align: left;
			padding: 0 22rpx;

			.btn-item-l {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
	}
	.newStyle {
		.record-card {
			margin: 0;
		}
		.new-record-card {
			padding: 30rpx;
			background: linear-gradient(180deg, #f0fbfe 0%, #fff 40%);
			border-radius: 15rpx;
			color: #666666;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 30rpx;
				color: #1f2434;
				line-height: 48rpx;
				text-align: left;
			}

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: rgba(31, 36, 52, 0.35);
				text-align: left;
				margin: 10rpx 0 30rpx 0;
			}

			.record-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.record-item {
					width: 204rpx;
					height: 131rpx;
					background: rgba(190, 190, 190, 0.18);
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					padding: 20rpx 10rpx 10rpx 12rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.b-box {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #191919;
						text-align: left;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}
			}
		}
	}
	.my-swiper {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
	}

	.swiper-container {
		max-height: 400rpx;
		height: 376rpx;
		flex: 1;

		.swiper-item {
			flex: 1;
			display: flex;
			box-sizing: border-box !important;
		}
	}

	.record-card {
		margin: 0 32rpx 16rpx;
		padding: 32rpx;
		background: linear-gradient(180deg, #f0fbfe 0%, #fff 40%);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(84, 93, 222, 0.1);
		border-radius: 32rpx;
		color: #666666;

		.c_tips {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 70rpx;

			.l-txt {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;

				.icon-box {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
				}

				.icon {
					width: 64rpx;
					height: 64rpx;
				}
			}

			.r-txt {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.txt {
				font-size: 30rpx;
				font-weight: 600;
				color: #000000;
			}

			.icon-question-circle-fill {
				font-size: 34rpx;
			}
		}

		.total {
			padding: 16rpx 0 32rpx;
			font-size: 24rpx;
			text-align: left;
			color: #999999;
		}

		.record-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.img {
				width: 194rpx;
				height: 240rpx;
			}
		}

		.r_charts {
			width: 100%;
			height: 460rpx;
			padding-bottom: 22rpx;
		}

		.details {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx 16rpx 16rpx 0;
			border-top: 2rpx solid #fafafa;
			font-size: 28rpx;
			color: #666;

			.d_l {
				display: flex;
				align-items: center;

				.l_l {
					width: 44rpx;
					height: 44rpx;
					border-radius: 16rpx;
					line-height: 44rpx;
					color: #fff;
				}

				.type {
					padding-left: 16rpx;
				}
			}
		}

		.goRecord {
			width: 100%;
			height: 88rpx;
		}
	}

	.m-card {
		margin: 0 32rpx 0;
		padding: 32rpx;
		background: linear-gradient(180deg, #f0fbfe 0%, #fff 40%);
		border-radius: 32rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(105, 130, 232, 0.1);
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #333333;

		.c_tips {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 32rpx;

			.txt {
				width: 100%;
				font-size: 30rpx;
				font-weight: 500;
				color: #1f2434;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.u_time {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.icon-question-circle-fill {
				font-size: 34rpx;
			}
		}

		.task,
		.unlock,
		.none {
			font-size: 28rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.status {
				margin: 48rpx 0 72rpx;
				font-weight: 500;
				font-size: 48rpx;
				font-family: PingFangSC-Medium, PingFang SC;
			}

			.m_t {
				margin-bottom: 12rpx;
				font-weight: 500;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				text-align: left;
			}

			.intro {
				padding: 0 64rpx 64rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				text-align: left;
			}
			.unlock-btn {
				width: 258rpx;
				height: 82rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #1f2434;
				border-radius: 64rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 82rpx;
				text-align: center;
			}
			.unlock-text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #1f2434;
				line-height: 48rpx;
				text-align: left;
				margin-top: 38rpx;
			}
			.unlock-text2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(31, 36, 52, 0.5);
				line-height: 42rpx;
				text-align: center;
				width: 418rpx;
			}
			.unlock-text3 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 42rpx;
				color: #1f2434;
				line-height: 42rpx;
				text-align: center;
				margin: 0 10rpx;
			}
			.weeks,
			.day {
				width: 100%;
				padding: 30rpx;
				border-radius: 32rpx;
				color: #1f2434;

				.d_t {
					font-size: 28rpx;
					font-weight: 500;
					font-family: PingFangSC-Medium, PingFang SC;
					text-align: left;
				}

				.tips {
					line-height: 34rpx;
					padding: 14rpx 0 38rpx;
					font-size: 26rpx;
					text-align: left;
					color: rgba(31, 36, 52, 0.5);
				}

				.options {
					display: flex;
					align-items: center;
					justify-content: space-around;
					padding: 0 100rpx;
					.option {
						display: flex;
						flex-direction: column;
						align-items: center;

						.o_status {
							width: 96rpx;
							height: 96rpx;
							margin-bottom: 16rpx;
							border-radius: 50%;
							font-size: 32rpx;
							background-color: #fafafa;
							border: 2rpx solid #1f2434;
							color: #1f2434;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.checked {
							background: linear-gradient(
								180deg,
								#545454 0%,
								#1f2434 100%
							);
							border: 0;
							color: #fff;
						}

						.type {
							font-size: 20rpx;
						}
					}
				}
			}
		}

		.unlock {
			.m_t {
				margin: 48rpx 0 64rpx 0;
				padding: 0 32rpx;
			}
		}

		.task {
			.u_time {
				width: 100%;
				text-align: left;
			}

			.garage {
				width: 320rpx;
				height: 320rpx;
				margin-top: 16rpx;
				position: relative;

				.uni-ec-canvas {
					width: 100%;
					height: 100%;
				}

				.details {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -60%);
					display: flex;
					flex-direction: column;
					align-items: center;
					font-weight: 500;
					font-size: 72rpx;
					font-family: PingFangSC-Medium, PingFang SC;

					.text1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}
				}
			}

			.m_t {
				padding: 0 32rpx;
				margin-bottom: 0;
			}

			.weeks {
				padding: 32rpx 32rpx 48rpx 32rpx;
				margin: 64rpx 0 0 0;

				.w_box,
				.status {
					display: flex;
					align-items: center;
					margin: 16rpx 0 48rpx 0;

					.s_i {
						display: flex;
						align-items: center;
						margin-right: 48rpx;

						.s_dot {
							width: 24rpx;
							height: 24rpx;
							border-radius: 50%;
						}

						.s_text {
							font-size: 24rpx;
							padding-left: 8rpx;
						}
					}
				}

				.w_box {
					margin: 0;
					padding: 0 6rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.week {
						display: flex;
						flex-direction: column;
						align-items: center;

						.w_dot {
							width: 36rpx;
							height: 36rpx;
							border-radius: 50%;
						}

						.w_text {
							font-size: 20rpx;
							padding-top: 16rpx;
						}
					}
				}
			}
		}

		.more_button {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #545dde;
			border-radius: 16rpx;
			color: #fff;
			font-size: 36rpx;
		}

		.garage {
			width: 320rpx;
			height: 320rpx;
			position: relative;

			.canvas {
				width: 100%;
				height: 100%;
			}

			.status-t {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);

				.status-count {
					font-weight: 500;
					font-size: 36rpx;
					color: #333333;
					font-family: PingFangSC-Medium, PingFang SC;
				}
			}
		}
	}

	.w-card {
		margin-bottom: 48rpx;
		padding: 32rpx;
		background-color: #ffffff;
		border-radius: 32rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(105, 130, 232, 0.1);
		color: #666666;

		.title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.t-l {
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				font-size: 30rpx;
				color: #000;
			}

			.add {
				width: 54rpx;
				height: 54rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgba(31, 36, 52, 0.1);
				border-radius: 50%;
			}
		}
		.date-box {
			width: 574rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 34rpx auto 26rpx;
			padding: 0;
			.pre-p {
			}
			.date-m {
				min-width: 240rpx;
				padding: 0 28rpx 0 32rpx;
				margin: 0 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 25rpx;
				color: rgba(31, 36, 52, 0.5);
				text-align: center;
			}
			.next-p {
			}
		}
		.tabs {
			width: 574rpx;
			height: 66rpx;
			margin: 24rpx auto 0;
			display: flex;
			align-items: center;
			background: #f3f4f7;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			.tab {
				width: 33.3%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(31, 36, 52, 0.5);
				line-height: 38rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				border-right: 2rpx solid #d0d0d0;
				&:last-child {
					border-right: 0;
				}
			}
			.current {
				font-weight: 600;
				font-size: 26rpx;
				color: #1f2434;
			}
		}

		.charts_w {
			height: 460rpx;
			margin-top: 10rpx;
			width: 100%;
			position: relative;

			.uni-ec-canvas {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 88;
				width: 100%;
				height: 100%;
			}
		}

		.showModal-page {
			width: 100%;
			height: 64rpx;
			padding: 0 32rpx;
			background-color: #fafafa;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.s_l {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex: 1;
				font-size: 20rpx;
				color: #666666;

				.showModal-line {
					width: 2rpx;
					height: 36rpx;
					background: #e5e5e5;
					margin: 0 24rpx;
				}

				.info_data {
					display: flex;
					align-items: center;
				}
			}

			.h_b {
				width: 80rpx;
				height: 36rpx;
				line-height: 32rpx;
				border: 2rpx solid #545dde;
				border-radius: 22rpx;
				color: #545dde;
				font-size: 18rpx;
			}
		}
	}

	.recommended {
		margin: 0 auto;
		width: 686rpx;
		background: #818df3;
		padding: 32rpx;
		border-radius: 32rpx 32rpx 32rpx 32rpx;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #ffffff;
			margin-bottom: 32rpx;
			text-align: left;
		}

		.content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 622rpx;
			background: rgba(245, 246, 250, 0.26);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 32rpx;
			font-size: 32rpx;
			color: #fff;
			margin: 0 auto;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				flex-direction: column;

				.item-t {
					font-size: 24rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		.btn-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 32rpx;

			.btn-item {
				width: 296rpx;
				height: 72rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #ffffff;
				border-radius: 198rpx 198rpx 198rpx 198rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				line-height: 44rpx;
				text-align: left;
				text-transform: none;
				padding: 0 32rpx;

				.btn-item-l {
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}

	.card_btn {
		width: 100%;
		height: 88rpx;
		line-height: 80rpx;
		border: 4rpx solid #545dde;
		color: #545dde;
		border-radius: 16rpx;
		font-size: 36rpx;
	}
}

.popup-content {
	padding: 32rpx;
	min-height: 720rpx;

	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
	}

	.con-box {
		padding: 32rpx 48rpx;
		background: #f2f3fd;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		margin-top: 48rpx;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 28rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				text-align: left;
			}

			.num {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				white-space: nowrap;
			}
		}
	}

	.btn {
		width: 100%;
		height: 88rpx;
		background: #545dde;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
	}
}

.guide-box {
	width: 100vw;
	height: 100vh;

	.img {
		width: 100%;
		height: 100%;
	}
}
</style>
